<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css测试01</title>
    <style type="text/css">
        /*id 选择器*/
        #userNameErrorMsg {
            color : red;
            font-size : 20px;
        }
        /*标签选择器*/
        /*标签选择器作用的范围比id选择器广, 但凡是这个标签都用这个样式*/
        /*如果有单独的标签里面已经有了 type 属性, 那么标签选择器就不会生效了*/
        div {
            background-color: black;
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
        /*类选择器
        语法格式为
        这种写法可以跨标签
        .类名{

        }*/
        .myClass {
            border : 1px solid red;
        }

        ul {
            /*删除列表样式*/
           list-style-type: none;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="待引入文件.css" />
</head>
<body>

<!--    css 的第一种方式-->
<!--    display 布局样式(none表示隐藏, block表示显示)-->

    <div style="width: 300px;height: 300px; background-color: blue;display: block"></div>

<!--    样式还可以这样写:-->
<!--        border : 1px solid black-->
    <div style="width: 300px;height: 300px; background-color: blue;display: block;
    border : 1px solid black"></div>


<!--    css 的第二种方式-->
<!--    设置字体大小为 12px , 颜色为红色-->
    <span id="userNameErrorMsg">对不起, 用户名不能为空!</span>

<!--    将下面的 div 的样式全部修改-->
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <br/>
    <br/>
    <br/>

    使用类选择器修改文本框和下拉列表的样式
    <input type="text" class="myClass"/>
    <select class="myClass">
        <option>小学</option>
        <option>初中</option>
        <option>高中</option>
    </select>

    <br/>
    <br/>
    <br/>
    <br/>

<!--    通过第三种方式引入文件修改HTML的样式-->
<!--    将超链接的下划线删去-->
    <a href="http://baidu.com">百度</a>

    <br/>

    <span id="baidu">点击我跳转到百度</span>


    <br/>

<!--    列表样式-->
<!--    删掉小圆点-->
    <ul>
        <li>
           中国
            <ul>
                <li>
                    陕西
                </li>
                <li>
                    北京
                </li>
            </ul>
        </li>
        <li>
            美国
        </li>
        <li>
            俄罗斯
        </li>
    </ul>


    <br/>

<!--    定位: 直接定位-->
    <div typle="background-color : red;border : 1px black solid; width : 300px;
    height : 300px;position : absolute;left : 100px;top : 100"></div>
</body>
</html>